<style lang="scss" scoped>
	.pserviceOrder {
		padding-top:20px;
		
	}
</style>

<template>

	<div class="n-page pserviceOrder" v-loading="loading">
		<h1 class="n-page-h1"><em>{{ $route.meta.title }}</em></h1>
		<el-table :data="list">
			<el-table-column label="#" type="index" />
			<el-table-column label="订单名称" prop="nickname"/>
			<el-table-column label="订单号" prop="nickname"/>
			<el-table-column label="操作">
				<template #default="{row}">
					<el-button   type="text">编辑</el-button>
				</template>
			</el-table-column>
		</el-table>
		<n-page :params="params"  />
		<n-handle class="n-page-dialog" :conf="handleConf.props" ref="handle" :compList="handleConf.compList" :btns="handleConf.btns"  @ok="handle"  :form="handleConf.form" />
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				loading:false,
				list:[],
				handleConf:{
					props:{title: '创建订单', type:'dialog', size:'600px'},
					form:{},
					_form:{
						user_name:'',
						tel:'',
						uid:'',
						id:'',
					},
					compList:[
						{type: 'text', label: '姓名', required:true, k: 'user_name'},
						{
							type: 'text', label: '手机号', required:true, k: 'tel',
							verif:({item,v})=> !(item.err = (!v || !(v + '').match(/^1\d{10}/)) ? '手机号有误' : '')
						},
					],
					btns:[
						{ label: '确定', props:{type: 'primary'}, evKey: 'ok' },
					],
				},
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			async getData(){
				const res = await this._req(this.$api.company.getService(this.params));
				if(res)this.list = res.results;
			},
			
			add(row){
				const {handleConf} = this;
				if(!this.$auth.isLogin()) return this.$msg('请登录',2)
				handleConf.form = {...this.$base.clone(handleConf._form), id:row.id, user_id: this.$store.userInfo.user_id };
				handleConf.props.show = true;
			},
			async handle(opt){
				const { handleConf:{props,form } } = this;
				if(!this.$refs.handle.verif()) return;
				const res = await this._req(this.$api.company.createService(form),props);
				if(!res)return;
				this.$msg();
				this.getData();
				props.show = false;
			},
			
			
		}
	}
</script>
